<template>
	<a-drawer v-bind="options">
		<a-tabs type="card" class="dialog-card-container">
			<template #rightExtra>
				<close-outlined class="cursor-pointer" @click="options.onClose()" />
			</template>
			<a-tab-pane key="detail" tab="预定详情">
				<a-skeleton :loading="loading" :paragraph="{rows: 15}">
					<booking-detail :data-source="detail" />
				</a-skeleton>
			</a-tab-pane>
			<a-tab-pane key="logs" tab="操作记录">
				<operation-record :id="id" />
			</a-tab-pane>
		</a-tabs>
		<template #footer>
			<a-space :size="12">
				<template v-for="(item, i) in operationList" :key="i">
					<template v-if="store.hasPermissions(item.action)">
						<a-button danger v-if="item.type == 'danger'" @click="handler(item.field)">{{ item.name }}</a-button>
						<a-button v-else :type="item.type" @click="handler(item.field)">{{ item.name }}</a-button>
					</template>
				</template>
			</a-space>
		</template>
		<!-- 弹窗 -->
		<template v-if="visible && detail">
			<!-- 签约 -->
			<!-- <renter-sign-dialog v-model:visible="vivibles.showSignContract" :contract="signData" /> -->
			<signing-dialog v-model:visible="vivibles.showSignContract" :contract="signData" :signing-type="'renter'" />
			<!-- 提醒付款 -->
			<remind-pay-dialog :data="detail" v-model:visible="vivibles.showRemindPay" @success="getDetail" />
			<!-- 作废 -->
			<to-void-dialog :id="id" v-model:visible="vivibles.showToVoid" @success="getDetail" />
			<!-- 接受预定 -->
			<accept-reserve-dialog :id="id" v-model:visible="vivibles.showAcceptReserve" @success="getDetail" />
			<!-- 拒绝预定 -->
			<refuse-reserve-dialog :id="id" v-model:visible="vivibles.showRefuseReserve" @success="getDetail" />
			<!-- 查看合同 -->
			<tenant-detail-dialog :contract-id="detail.contractId" v-model:visible="vivibles.showSeeContract" @close="getDetail" />
			<!-- 租客退定 -->
			<retreat-dialog :id="id" v-model:visible="vivibles.showRetreat" @success="getDetail" />

			<!-- 定金转移 -->
			<deposit-transfer-dialog :id="id" v-model:visible="vivibles.showDepositTransfer" @success="getDetail" />

			<!-- 定金罚没 -->
			<deposit-forfeiture-dialog :id="id" v-model:visible="vivibles.depositConfiscation" @success="getDetail" />
		</template>
	</a-drawer>
</template>
<script setup lang="ts">
	import {labelStatus} from '@/utils/reserve-status'
	import {getBookDetail} from '@/api/contract'
	import {CloseOutlined} from '@ant-design/icons-vue'
	import {onBeforeMount, onMounted, reactive, ref, toRef, watch} from 'vue'
	import BookingDetail from '@/components/contract/reserve-detail-dialog/booking-detail'
	import OperationRecord from '@/components/contract/reserve-detail-dialog/operation-record'
	import RemindPayDialog from '@/components/contract/reserve/remind-pay'
	import ToVoidDialog from '@/components/contract/reserve/to-void'
	import AcceptReserveDialog from '@/components/contract/reserve/accept-reserve'
	import RefuseReserveDialog from '@/components/contract/reserve/refuse-reserve'
	import TenantDetailDialog from '@/components/contract/contract-detail-dialog'
	import RetreatDialog from '@/components/contract/reserve/retreat'
	import DepositTransferDialog from '@/components/contract/reserve/deposit-transfer'
	import {useStore} from '@/store/index'
	import emitter from 'yuxin-base/src/utils/bus'
	import RenterSignDialog from '@/components/contract/tenant/renter-sign-dialog.vue'
	import {RenterContract} from '@/interface/contract'
	import SigningDialog from '@/components/contract/signing/signing-dialog.vue'
	import DepositForfeitureDialog from '@/components/contract/reserve/deposit-forfeiture'

	const store = useStore()

	const props = defineProps<{
		id?: string
		visible: boolean
	}>()

	const emit = defineEmits(['update:visible', 'close'])
	const options = reactive({
		width: 600,
		centered: true,
		placement: 'right',
		closable: false,
		destroyOnClose: true,
		getContainer: false,
		visible: toRef(props, 'visible'),
		style: {
			position: 'absolute'
		},
		bodyStyle: {
			padding: 0
		},
		maskStyle: {
			background: 'transparent'
		},
		footerStyle: {
			textAlign: 'right'
		},
		onClose() {
			emit('update:visible', false)
			setTimeout(() => emit('close'), 100)
		}
	})

	const cancel = () => {
		emit('close')
		emit('update:visible', false)
		detail.value = null
	}

	const detail = ref<any>({})

	const operationList = ref<any>([])
	const signData = ref<RenterContract>({})

	const loading = ref<boolean>(true)

	const getDetail = () => {
		if (props.id) {
			loading.value = true
			getBookDetail(props.id)
				.then((res: any) => {
					let statusInfo = {
						name: labelStatus[res.data.bookStatus].name,
						color: labelStatus[res.data.bookStatus].color
					}

					detail.value = {...res.data, statusInfo}

					// 签约数据
					signData.value = {
						signType: 1,
						houseId: detail.value.houseId
					}

					console.log(labelStatus[res.data.bookStatus].operation)

					// 操作
					operationList.value = [...labelStatus[res.data.bookStatus].operation].sort((a: any, b: any) => a.sort - b.sort)
					console.log(operationList.value, 'operationList.value')
				})
				.finally(() => (loading.value = false))
		}
	}

	// 操作按钮
	const vivibles = reactive<any>({
		// 提醒付款
		showRemindPay: false,
		// 作废预定
		showToVoid: false,
		// 签约
		showSignContract: false,
		// 退定
		showRetreat: false,
		// 定金转移
		showDepositTransfer: false,
		// 查看合同
		showSeeContract: false,
		// 接受预定
		showAcceptReserve: false,
		// 拒绝预定
		showRefuseReserve: false,
		// 定金罚没
		depositConfiscation: false
	})
	const handler = (field: string) => {
		vivibles[field] = true
	}

	// 定金罚没成功
	onMounted(() => {
		emitter.on('depositForfeiture', getDetail)
	})
	// 销毁事件
	onBeforeMount(() => {
		emitter.off('depositForfeiture')
	})

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)
</script>
